<template>
	<view>
		<view class="nav-head">请选择您的身份
    <view class="nav-cont">
      介绍内容介绍内容介绍内容介绍内容
    </view>
    </view>
		<view class="form re">
      <view class="form-item">
        <view class="label">
          <view class="head">
            手机号
          </view>
         <input type="text" v-model="phoneNumber" placeholder="请输入手机号"  class="input-box"/>
        </view>
      </view>
      <view class="form-item">
        <view class="label">
          <view class="head">
            识别码
          </view>
         <input type="text" v-model="codeImg" placeholder="请输入识别码"  class="input-box"/>
        </view>
        <image src="../../static/img/2.jpg" mode="scaleToFill" class="codeImg"></image>
      </view>
      <view class="form-item">
        <view class="label">
          <view class="head">
            验证码
          </view>
         <input type="text" v-model="code" placeholder="请输入验证码"  class="input-box"/>
        </view>
        <view class="codeImg">
          <view class="getCode" :style="{ color: getCodeBtnColor }" @click.stop="getCode()">
            {{ getCodeText }}
          </view>
        </view>
      </view>
      <view class="form-item">
        <view class="label">
          <view class="head">
           登录密码
          </view>
         <input type="text" v-model="passwd" placeholder="请输入密码"  class="input-box"/>
        </view>
      </view><view class="btn" @tap="doReg">立即注册</view>
			<view class="res"><view @tap="toLogin">已有账号立即登录</view></view>
		</view>
	</view>
</template>

<script>
import md5 from '@/common/SDK/md5.min.js';
export default {
	data() {
		return {
			phoneNumber: '',
			code: '',
      codeImg: '',
			passwd: '',
			getCodeText: '获取验证码',
			getCodeBtnColor: '#be9d6b',
			getCodeisWaiting: false,
      
		};
	},
	onLoad(e) {
    console.log(e)
    uni.showModal({
      content:`注册类型是${e.type}`
    })
  },
	methods: {
		Timer() {},
		getCode() {
			uni.hideKeyboard();
			if (this.getCodeisWaiting) {
				return;
			}
			if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phoneNumber)) {
				uni.showToast({ title: '请填写正确手机号码', icon: 'none' });
				return false;
			}
			this.getCodeText = '发送中...';
			this.getCodeisWaiting = true;
			this.getCodeBtnColor = 'rgba(255, 74, 0, 0.5)';
			//示例用定时器模拟请求效果
			setTimeout(() => {
				uni.showToast({ title: '验证码已发送', icon: 'none' });
				//示例默认1234，生产中请删除这一句。
				this.code = 1234;
				this.setTimer();
			}, 1000);
		},
		setTimer() {
			let holdTime = 60;
			this.getCodeText = '重新获取(60)';
			this.Timer = setInterval(() => {
				if (holdTime <= 0) {
					this.getCodeisWaiting = false;
					this.getCodeBtnColor = '#be9d6b';
					this.getCodeText = '获取验证码';
					clearInterval(this.Timer);
					return;
				}
				this.getCodeText = '重新获取(' + holdTime + ')';
				holdTime--;
			}, 1000);
		},
		doReg() {
			uni.hideKeyboard();
			//模板示例部分验证规则
			if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phoneNumber)) {
				uni.showToast({ title: '请填写正确手机号码', icon: 'none' });
				return false;
			}
			//示例验证码，实际使用中应为请求服务器比对验证码是否正确。
			if (this.code != 1234) {
				uni.showToast({ title: '验证码不正确', icon: 'none' });
				return false;
			}
			uni.showLoading({
				title: '提交中...'
			});
			//模板示例把用户注册信息储存在本地，实际使用中请替换为上传服务器。
			setTimeout(() => {
				uni.getStorage({
					key: 'UserList',
					success: res => {
						//增加记录，密码md5
						res.data.push({ username: this.phoneNumber, passwd: md5(this.passwd) });
						uni.setStorage({
							key: 'UserList',
							data: res.data,
							success: function() {
								uni.hideLoading();
								uni.showToast({ title: '注册成功', icon: 'success' });
								setTimeout(function() {
                  uni.navigateTo({
                    url: '/pages/login/completeData'
                  })
								}, 1000);
							}
						});
					},
					fail: e => {
						uni.hideLoading();
						console.log('error');
						//新建UserList
						uni.setStorage({
							key: 'UserList',
							data: [{ username: this.phoneNumber, passwd: md5(this.passwd) }],
							success: function() {
								uni.hideLoading();
								uni.showToast({ title: '注册成功', icon: 'success' });
								setTimeout(function() {
									uni.navigateTo({
									  url: '/pages/login/completeData'
									})
								}, 1000);
							},
							fail: function(e) {
								console.log('set error:' + JSON.stringify(e));
							}
						});
					}
				});
			}, 1000);
		},
		toLogin() {
			uni.hideKeyboard();
			uni.redirectTo({ url: 'login' });
			uni.navigateBack();
		}
	}
};
</script>

<style lang="scss">
@import '../../static/css/login.scss';
.nav-head {
  margin: 40rpx 30rpx;
  margin-bottom: 100rpx;
  font-size: 40rpx;
  font-weight: bold;
  .nav-cont {
      color: #666;
      font-size: 30rpx;
      font-weight: 300;
  }
}
.form-item {
      display: flex;
      align-items: center;
      width: 100%;
  .label {
    padding: 10rpx;
        flex-grow: 1;
    .head {
      font-size: 36rpx;
    }
    .input-box {
          height: 80rpx;
          line-height: 80rpx;
          border-bottom: 1rpx solid #e6e6e6;
    }
  }
  .codeImg {
    width: 200rpx;
        height: 100rpx;
        text-align: center;
        .getCode {
          margin-top: 50rpx;
        }
  }
}
</style>
